<body>
<div id="map">
<img name="map" src="Graphics/Pictures/map.png" alt=""/>
</div>
<form name="f" action="javascript:void(null)"><div>
Current Position: <input type="text" name="curpos" readonly="readonly"/><br/>
Name: <input type="text" name="locname"/><br/>
Point of Interest: <input type="text" name="poi"/><br/>
Healing Spot: <input type="text" name="healing"/><br/>
Switch: <input type="text" name="swtch"/><br/>
<input type="button" name="btnSave" value="Save" disabled="disabled"/> 
<input type="button" name="btnCancel" value="Cancel"/><br/>
Single section from townmap.txt (without section heading):
<textarea name="data" rows="10" cols="70"></textarea><br/>
<input type="button" name="btnLoad" value="Load"/> (To load data into the editor)<br/>
Copy the data above to townmap.txt when you're done
</div></form>
<script type="text/javascript">//<![CDATA[
choiceX=-1
choiceY=-1
mappoints=[]
mpelements=[]
  function target(event){
   return event.target||event.srcElement
  }
  function addChild(e){
    if(document.documentElement){
     document.documentElement.appendChild(e) 
    } else{
     document.body.appendChild(e) 
    }
  }
  function removeChild(e){
    if(document.documentElement){
     document.documentElement.removeChild(e) 
    } else{
     document.body.removeChild(e) 
    }
  }
  function positionedOffset(element) {
    var valueT = 0, valueL = 0;
    do {
      valueT += element.offsetTop  || 0;
      valueL += element.offsetLeft || 0;
      element = element.offsetParent;
      if (element) {
        p = element.style.position;
        if (p == 'relative' || p == 'absolute') break;
      }
    } while (element);
    return [valueL, valueT];
  }
  function pointerX(event) {
    return event.pageX || (event.clientX +
      (document.documentElement.scrollLeft || document.body.scrollLeft));
  }
  function pointerY(event) {
    return event.pageY || (event.clientY +
      (document.documentElement.scrollTop || document.body.scrollTop));
  }
  function elementPos(event){
   t=target(event)
   po=positionedOffset(t)
   return [(pointerX(event))-po[0],(pointerY(event))-po[1]]
  }
  function elementPosObject(event,other){
   t=other
   po=positionedOffset(t)
   return [(pointerX(event))-po[0],(pointerY(event))-po[1]]
  }
  function attachEvent(element,name,observer,useCapture){
    if (element.addEventListener) {
      element.addEventListener(name, observer, useCapture||false);
    } else if (element.attachEvent) {
      element.attachEvent('on' + name, observer);
    }
  }
 function qstr(text){
  var temp; 
  temp = text.toString();
  while (true){
   if (temp == '') return text;
   if (temp.indexOf("'") >= 0) break;
   if (temp.indexOf('"') >= 0) break;
   if (temp.indexOf(' ') >= 0) break;
   if (temp.indexOf(',') >= 0) break;
   return temp;
  }
  temp = temp.replace(/\'/g,"''");
  temp = temp.replace(/\"/g,"\"\"");
  return "\"" + temp + "\"";
 }
function CsvNextToken(dataobj){
 var i;
 var text;
 var c,n;
 var inside;
 var value; 
 var q = '';
 inside = false;
 value = '';
 var skip = false;
 var data=dataobj[0]
 if (data == '') return '';
 text = '';
 for (i = 0; i < data.length; ++i){
  if (skip){
     skip = false;
     continue;
  }
  c = data.charAt(i);
  n = '';
  if (inside){
   if (c == q) {
     if (i < data.length-1) n = data.charAt(i+1);
     if (n == q){
        value = value + c;
        skip = true;
        continue;
     }
    inside = false;
    continue;
   }
   value = value + c;
   continue;  
  }
  if ((c == '"') || (c == "'")){
   inside = true;
   q = c;
   continue;
  }
  if (c == ',') break;
  value = value + c;
 }
 if (i >= (data.length-1)) { dataobj[0]= ''; }
 else{dataobj[0]=data.substr(i+1);}
 dataobj[0]=dataobj[0].replace(/^\s+/,"").replace(/\s+$/,"")
 return value;
}
///////////////////////////
  function loadMapPoints(){
   mappoints=[]
   lines=document.f.data.value.split("\n")
   for(var i=0;i<lines.length;i++){
    if(!/^\#/.test(lines[i])&&!/^\s*$/.test(lines[i])){
     e=/^\s*(\w+)\s*=\s*(.*)$/.exec(lines[i])
     if(!e){
      alert("Bad line syntax in line "+(i+1))
     }
     if(e[1]=="Filename"){
      o=document.getElementById("map")
      o.innerHTML='<img name="map" src="Graphics/Pictures/'+e[2]+'" alt=""/>'
     } else if(e[1]=="Point"){
      data=[e[2]]
      mappt=[]
      mappt[0]=parseInt(CsvNextToken(data),10)
      mappt[1]=parseInt(CsvNextToken(data),10)
      mappt[2]=CsvNextToken(data)
      mappt[3]=CsvNextToken(data)
      mappt[4]=[CsvNextToken(data),CsvNextToken(data),CsvNextToken(data)]
      mappt[5]=CsvNextToken(data)
      mappoints[mappoints.length]=mappt
     }
    }
   }
  }
  function createMapPoint(imgfile,x,y){
    e=document.createElement("div")
    e.innerHTML="<img src='"+imgfile+"' alt=''/>"
    e.style.left=elempos[0]+x*16+4
    e.style.top=elempos[1]+y*16+4
    e.style.position="absolute"
    attachEvent(e,"mousemove",MapMouseMove)
    attachEvent(e,"click",MapClick)
    return e
  }
  function showMapPoints(){
   for(var i=0;i<mpelements.length;i++){
    removeChild(mpelements[i])
   }
   mpelements=[]
   elempos=positionedOffset(document.images.map)
   for(var i=0;i<mappoints.length;i++){
    e=createMapPoint("knownpoint.bmp",mappoints[i][0],mappoints[i][1])
    addChild(e)
    mpelements[mpelements.length]=e
   }
   if(choiceX!=-1||choiceY!=-1){
    e=createMapPoint("selpoint.bmp",choiceX,choiceY)
    addChild(e)
    mpelements[mpelements.length]=e
   }
  }
  function MapMouseMove(e){
   if(choiceX==-1 && choiceY==-1){
    elempos=elementPosObject(e,document.getElementById("map"))
    setMapPoint(elempos[0]>>4,elempos[1]>>4)
   }
  }
  function MapClick(e){
    elempos=elementPosObject(e,document.getElementById("map"))
    choiceX=elempos[0]>>4
    choiceY=elempos[1]>>4
    setMapPoint(elempos[0]>>4,elempos[1]>>4)
    document.f.btnSave.disabled=false
    showMapPoints()
   }
  function getbase(fn){
   if(fn.lastIndexOf("/")>=0){
    fn=fn.substr(fn.lastIndexOf("/")+1)
   }
   if(fn.lastIndexOf("\\")>=0){
    fn=fn.substr(fn.lastIndexOf("\\")+1)
   }
   return fn
  }
  function genMapPoints(){
   ret=""
   ret+="Filename="+qstr(getbase(document.images.map.src))+"\r\n"
   for(var i=0;i<mappoints.length;i++){
    ret+="Point="+[mappoints[i][0],mappoints[i][1],
      qstr(mappoints[i][2]),qstr(mappoints[i][3]),
      mappoints[i][4][0]!=null?mappoints[i][4][0]:"",
      mappoints[i][4][1]!=null?mappoints[i][4][1]:"",
      mappoints[i][4][2]!=null?mappoints[i][4][2]:"",
      mappoints[i][5]]+"\r\n"
   }
   document.f.data.value=ret
   showMapPoints()
  }
  function setMapPoint(x,y){
   document.f.curpos.value=[x,y]
   for(var i=0;i<mappoints.length;i++){
    if(mappoints[i][0]==x&&mappoints[i][1]==y){
     document.f.locname.value=mappoints[i][2]
     document.f.poi.value=mappoints[i][3]
     document.f.healing.value=mappoints[i][4]
     document.f.swtch.value=mappoints[i][5]
     return
    }
   }
   document.f.locname.value=""
   document.f.poi.value=""
   document.f.healing.value=""
   document.f.swtch.value=""
  }
  function addMapPoint(x,y){
   for(var i=0;i<mappoints.length;i++){
    if(mappoints[i][0]==x&&mappoints[i][1]==y){
     mappoints[i][2]=document.f.locname.value
     mappoints[i][3]=document.f.poi.value
     mappoints[i][4]=document.f.healing.value.split(",")
     mappoints[i][5]=document.f.swtch.value
     return
    }
   }
   mappoints[mappoints.length]=[x,y,
      document.f.locname.value,
      document.f.poi.value,
      document.f.healing.value.split(","),
      document.f.swtch.value,
   ]
  }
 attachEvent(window,"load",function(e){
  genMapPoints()
  attachEvent(document.images.map,"mouseout",function(e){
   if(choiceX==-1 && choiceY==-1){
    document.f.curpos.value=""
   }
  })
  attachEvent(document.getElementById("map"),"mousemove",MapMouseMove)
  attachEvent(document.getElementById("map"),"click",MapClick)
  attachEvent(document.f.btnSave,"click",function(e){
   if(choiceX!=-1||choiceY!=-1){
    addMapPoint(choiceX,choiceY)
    genMapPoints()
    target(e).disabled=true
    choiceX=choiceY=-1
    showMapPoints()
   }
  })
  attachEvent(document.f.btnCancel,"click",function(e){
   if(choiceX!=-1||choiceY!=-1){
    setMapPoint(choiceX,choiceY)
    choiceX=choiceY=-1
    showMapPoints()
   }
  })
  attachEvent(document.f.btnLoad,"click",function(e){
    loadMapPoints()
    genMapPoints()
    choiceX=choiceY=-1
    showMapPoints()
  })
 })
//]]></script>
</script>